<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
		<style type="text/css">
			body {
				background: transparent;
				background-color: rgba(150,150,150,0.5)
			}
			.aui-list-item-inner.option_active {
				color: #039be5
			}
		</style>
	</head>
	<body>
		<div id="content" class="aui-content">
			<ul class="aui-list aui-list-in">
				<li class="aui-list-item">
					<div id="option" class="aui-list-item-inner">
						金额不限
					</div>
				</li>
				<li class="aui-list-item">
					<div id="option" class="aui-list-item-inner">
						2000以下
					</div>
				</li>
				<li class="aui-list-item">
					<div id="option" class="aui-list-item-inner">
						2000-5000
					</div>
				</li>
				<li class="aui-list-item">
					<div id="option" class="aui-list-item-inner">
						5000-10000
					</div>
				</li>
				<li class="aui-list-item">
					<div id="option" class="aui-list-item-inner">
						10000-20000
					</div>
				</li>
				<li class="aui-list-item">
					<div id="option" class="aui-list-item-inner">
						20000-50000
					</div>
				</li>
				<li class="aui-list-item">
					<div id="option" class="aui-list-item-inner">
						50000以上
					</div>
				</li>
			</ul>
		</div>		
		<div id="paddings" style="background-color: (150,150,150,0)" onclick="returnBack()"></div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/aui-tab.js" ></script>
	<script>
		apiready = function() {
			api.parseTapmode();
			var options = document.querySelectorAll("#option");
			for (var i = 0; i < options.length; i++) {
				options[i].classList.remove("option_active");
			}
			options[api.pageParam.index - 1].classList.add("option_active");
			var content = document.getElementById("content");
			var paddings = document.getElementById("paddings");
			var content_h = content.offsetHeight;
			paddings.style.height = (api.frameHeight - content_h) + 'px';
		}
		var bar = document.querySelectorAll(".aui-list");
		if (bar) {
			for (var i = 0; i < bar.length; i++) {
				var d = bar[i];
				var tab = new auiTab({
					element : bar[i],
					repeatClick : true
				}, function(ret) {
					var options = document.querySelectorAll("#option");
					for (var i = 0; i < options.length; i++) {
						options[i].classList.remove("option_active");
					}
					options[ret.index - 1].classList.add("option_active");
					api.sendEvent({
						name : 'ev_option',
						extra : {
							option : ret.index,
						}
					});
					api.closeFrame();
				});
			}
		}
		function returnBack() {
			api.sendEvent({
				name : 'ev_option',
				extra : {
					option : 0//api.pageParam.index,
				}
			});
			api.closeFrame();
		}
	</script>
</html>